<template>
	<div class="app-container">
		<!-- 查询参数 -->
		<div class="search-wrapper">
			<el-form class="search-param" ref="pageParam" :model="pageParam" label-width="100px" size="mini">
				<el-form-item label="产生单位名称">
					<el-input v-model="pageParam.batNo" clearable></el-input>
				</el-form-item>
				<el-form-item label="采集时间">
					<el-date-picker style="width: 250px;" value-format="yyyy-MM-dd" v-model="timer" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				</el-form-item>
				<el-form-item style="margin-left: -60px;">
					<el-button type="primary" size="mini" class="el-icon-search" @click="pageByParam">确认查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-row>
			<el-col  :xs="24" :sm="8" :lg="6">
				<div class="chart-wrappers" :style="{height:clientHeight-295+'px'}">
	
					<PieChart ref="pie" :height="clientHeight-455+'px'"/>
				</div>
			</el-col>
			<el-col  :xs="24" :sm="16" :lg="18">
				<vxe-table show-overflow :column-config="{resizable: true}" :height="clientHeight-295" :loading="loading"
					:data="tableData.list" size="mini" border stripe>
					<vxe-column type="seq" title="序号" width="60"></vxe-column>
					<vxe-column field="t1" title="产生单位名称"></vxe-column>
					<vxe-column field="t2" title="区域">
					</vxe-column>
					<vxe-column field="t3" title="数据采集时间"></vxe-column>
					<vxe-column field="t4" title="本次产生量"></vxe-column>
					<vxe-column field="t5" title="专用桶编号（RFID号）"></vxe-column>
					<vxe-column field="t6" title="今日产生量"></vxe-column>
					<vxe-column field="t7" title="累计产生量"></vxe-column>
					<vxe-column title="操作" width="100" show-overflow>
						<template #default="{ row }">
							<!-- <vxe-button status="primary" icon="el-icon-edit" @click="addEditClick(row)">查看</vxe-button> -->
							<vxe-button status="success" @click="addEditClick(row.t1)">曲线</vxe-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageNo"
					:page-size="pageParam.pageSize" :total="tableData.totalRow"
					:page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@size-change="handleSizeChange" background class="page-wrapper" @current-change="handleCurrentChange">
				</vxe-pager>
			</el-col>
			
		</el-row>
		
		<!-- 新增与编辑 -->
		<!-- <add-edit ref="addEdit" @oldlist="oldlist"></add-edit> -->
	</div>
</template>

<script>
	import PieChart from './component/PieChart.vue'
	import datajson from '@/views/util/data.json'
	export default {
		components: {
			PieChart
		},
		data() {
			return {
				loading: true,
				timer: [],
				typeList: [{
						label: '过充',
						value: '0'
					},
					{
						label: '过放',
						value: '1'
					},
					{
						label: '过温',
						value: '2'
					},
					{
						label: '过流',
						value: '3'
					},
					// {
					// 	label: '充电',
					// 	value: '9'
					// },
					{
						label: '短路',
						value: '4'
					}
				],
				pageParam: {
					batNo: '', //电池包号
					pageIndex: 1,
					pageSize: 20,
					typeList: ['0','1','2','3','4'],
					beginTime: '',
					endTime: '',
				},
				tableData: {
					totalRow: 0,
					list: []
				},
				newsing:0,
				//totl:0,
				clientHeight:document.documentElement.clientHeight
			}
		},
		created() {
			this.oldlist();
		},
		methods: {
			formatterSex({
				cellValue
			}) {
				let item = this.typeList.find(item =>Number(item.value) == Number(cellValue))
				return item ? item.label : ''
			},
			filterTypeMethod({ value, row, column }) {
              return row.type >= value
            },
			pageByParam() {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = 20;
				this.oldlist()
			},
			handleSizeChange(val) {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = val;
				this.oldlist();
			},
			handleCurrentChange(val) {
				this.pageParam.pageIndex = val;
				this.oldlist();
			},
			async oldlist() {
				// this.loading = true;
				// if (this.timer != null && this.timer.length > 0) {
				// 	this.pageParam.beginTime = this.timer[0]+" 00:00:00"
				// 	this.pageParam.endTime = this.timer[1]+" 00:00:00"
				// } else {
				// 	this.pageParam.beginTime = null;
				// 	this.pageParam.endTime = null;
				// }
				// if(this.pageParam.typeList.length==0){
				// 	this.pageParam.typeList = ['0','1','2','3','4'];
				// }
				//查询图表
				// this.$nextTick(()=>{
				// 	this.init();
				// })
				//let result = await list(this.pageParam);
				//console.log("返回结果", result.data.list);
				this.loading = false;
				this.tableData.totalRow = datajson.zjlist.length;
				this.tableData.list = datajson.zjlist;
				
			},
			async init(){
				this.$refs.pie.bytype(this.pageParam);
				let ress = await totals(this.pageParam);
				this.newsing = ress.obj;
			},
			addEditClick(item) {
				//this.$refs.addEdit.open(item);
				let rum = Math.random()*10;
				console.log(item,rum);
				this.$refs.pie.setnums([2+rum,32+rum,32+rum,34+rum,22+rum,54+rum,54+rum,76+rum],["2022-08-01","2022-08-01","2022-08-01","2022-08-01","2022-08-01","2022-08-01","2022-08-01","2022-08-01"],item,true);
			},
			// 删除
			handleDelete(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del(id);
				})
			},
			async del(id) {

				let result = await del({
					id,
					token: this.pageParam.token
				});
				if (result.code == 1) {
					this.msgSuccess("删除成功");
					this.oldlist();
				}
				console.log(result)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/mixin.scss';
	.chart-wrappers{
		    border: 1px solid #e8eaec;
		    margin-right: 20px;
	}
	@mixin pnd {
		width: 40%;
		height: 60px;
		margin:2rem 5%;
		border-radius: 0.5rem;
		padding-top:10px;
	}
	.shwopan {
	    display: inline-flex;
	    justify-content: center;
	    text-align: center;
		width: 100%;
	    color: #Ffffff;
		.six{
			@include six;
			@include pnd
		}
		.four{
			@include three;
			@include pnd
		}
	}

</style>
